<template>
  <div id="user-activities-list" class="custom-table" v-loading="isLoading">
    <div v-if="!activities.length" class="easy-container no-data">
      {{ isLoading ? '' : '暂无数据' }}
    </div>
    <div v-for="activity in activities" :key="activity.id"
        class="easy-container flex content-space-between">
      <div class="cell">
        <div class="flex flex-wrap">
          <router-link :to="userPath" class="title link">{{ user.nickname }}</router-link>
          <span class="info">&nbsp;{{ activity.desc }}&nbsp;</span>
          <router-link :to="activity.path" class="title link">
            {{ $va.plainText(activity.msg1) }}</router-link>
        </div>
        <p>{{ $va.plainText(activity.msg2) }}</p>
      </div>
      <div class="cell shrink-0">
        <timeago :date-time="activity.created_at"/>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'UserActivitiesList', // 用户最新活动的列表
  props: {
    activities: { // 最新活动列表
      type: Array,
      required: true,
    },
    isLoading: { // 是否正在加载列表
      type: Boolean,
      required: true,
    },
    member: { // 群组那块调用这个表单时会传入当前查看的群员
      type: Object,
      required: false,
    },
  },
  computed: {
    ...mapState(['showingUser']),
    user() { return this.member || this.showingUser; },
    userPath() { return `/${this.$rp.USERS}/${this.user.id}`; },
  },
};
</script>

<style></style>
